<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>居民信息登记 - 社区管理系统</title>
  <!-- 引入Bootstrap美化界面 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Bootstrap图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2c3e50;
      --card-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    body {
      background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
      min-height: 100vh;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px 0;
    }
    .registration-card {
      background: white;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      overflow: hidden;
      max-width: 800px;
      margin: 0 auto;
    }
    .registration-header {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 25px;
      text-align: center;
    }
    .registration-form {
      padding: 30px;
    }
    .form-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
      z-index: 5;
    }
    .form-control {
      padding-left: 40px;
      height: 50px;
      border-radius: 8px;
      border: 1px solid #e1e5eb;
      transition: all 0.3s;
    }
    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
    }
    .btn-register {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border: none;
      height: 50px;
      font-size: 1.1rem;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s;
    }
    .btn-register:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
    }
    .error-message {
      background-color: #f8d7da;
      color: #721c24;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      border-left: 4px solid #dc3545;
    }
    .form-section {
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="registration-card">
    <div class="registration-header">
      <h2><i class="bi bi-person-plus"></i> 居民信息登记</h2>
      <p class="mb-0">请填写居民详细信息</p>
    </div>

    <div class="registration-form">
      <% if (request.getAttribute("error") != null) { %>
      <div class="error-message">
        <i class="bi bi-exclamation-circle"></i> <%= request.getAttribute("error") %>
      </div>
      <% } %>

      <form action="resident" method="post">
        <input type="hidden" name="action" value="register">

        <div class="form-section">
          <h5><i class="bi bi-person"></i> 基本信息</h5>
          <div class="row">
            <div class="col-md-6 mb-4 position-relative">
              <label for="name" class="form-label fw-bold">姓名</label>
              <i class="bi bi-person-badge form-icon"></i>
              <input type="text" id="name" name="name" class="form-control"
                     placeholder="请输入居民姓名" required>
            </div>

            <div class="col-md-6 mb-4 position-relative">
              <label for="gender" class="form-label fw-bold">性别</label>
              <i class="bi bi-gender-ambiguous form-icon"></i>
              <select id="gender" name="gender" class="form-select" required>
                <option value="">请选择性别</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>

          <div class="mb-4 position-relative">
            <label for="birthDate" class="form-label fw-bold">出生日期</label>
            <i class="bi bi-calendar form-icon"></i>
            <input type="date" id="birthDate" name="birthDate" class="form-control" required>
          </div>
        </div>

        <div class="form-section">
          <h5><i class="bi bi-house"></i> 居住信息</h5>
          <div class="mb-4 position-relative">
            <label for="address" class="form-label fw-bold">详细地址</label>
            <i class="bi bi-geo-alt form-icon"></i>
            <input type="text" id="address" name="address" class="form-control"
                   placeholder="请输入详细居住地址" required>
          </div>
        </div>

        <div class="form-section">
          <h5><i class="bi bi-heart-pulse"></i> 健康信息</h5>
          <div class="mb-4 position-relative">
            <label for="healthStatus" class="form-label fw-bold">健康状态</label>
            <i class="bi bi-clipboard-pulse form-icon"></i>
            <select id="healthStatus" name="healthStatus" class="form-select" required>
              <option value="">请选择健康状态</option>
              <option value="健康">健康</option>
              <option value="良好">良好</option>
              <option value="一般">一般</option>
              <option value="需关注">需关注</option>
              <option value="慢性病">慢性病管理</option>
            </select>
          </div>
        </div>

        <button type="submit" class="btn btn-register w-100 text-white">
          <i class="bi bi-check-circle me-2"></i> 提交登记
        </button>
      </form>
    </div>
  </div>

  <div class="mt-4 text-center text-muted">
    <small>© 2025 社区管理系统 | 居民服务平台</small>
  </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>